<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>订单评价</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=20141028987051">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css?t=20141028987051">
    <link href="__PUBLIC__/css/style.css?t=20141028987051" rel="stylesheet">

    <style>
    body{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
      .layout.fixed {
    padding-bottom: 280px;
}
.btn-confirm {
    border-radius: 10px;
    display: block;
    height: 74px;
    width: 60%;
    margin: 0 auto;
    background-color: #26adec;
    color: #ffffff;
    font-size: 42px;
    border: 0;
    outline: 0;
}
.top{
  margin: 70px 70px;
}
.logo{
  display: inline-block;
}
.orderdesc{
  display: inline-block;
  float: right;
  margin-right: 150px;
}

.orderdesc ul{
 margin-top: 15px;
}

.orderdesc ul li{
line-height: 60px;
}
/* 评论样式 */
.driver-evaluate {
    font-size: .8em;
    text-align: center;
}.driver-evaluate .star {
    width: 301px;
    height: 60px;
    background-size: 60px auto;
    background-position: 0 -80px;
    margin-top: 7px
}

.driver-evaluate .star.done {
    background-position: 0 0
}.driver-content .star.finish {
    background-position: 0 0
}.driver-evaluate .info {
    margin-top: 5px;
    color: #ff8a01
}

.driver-evaluate .mark-title {
    font-size: 12px;
    text-align: left;
    color: #aaa;
    padding-left: 4px;
    margin: 10px 0
}

.driver-evaluate .mark-detail li {
    margin: 0 10px 10px 0;
    float: left;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    line-height: 26px;
    color: #aaa;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 16px
}

.driver-evaluate .mark-detail li:before {
    content: "";
    display: inline-block;
    height: 26px;
    width: 12px;
    vertical-align: bottom
}

.driver-evaluate .mark-detail li:after {
    content: "";
    display: inline-block;
    height: 18px;
    width: 18px;
    background-image: url(../images/dianzan.png);
    background-size: 18px auto;
    margin: 4px;
    vertical-align: bottom;
    border: 1px solid #ccc;
    border-radius: 50%
}

.driver-evaluate .mark-detail li.active, .driver-evaluate .mark-detail li.selected {
    color: #ff8a01;
    border-color: #ff8a01
}

.driver-evaluate .mark-detail li.active:after, .driver-evaluate .mark-detail li.selected:after {
    border-color: #ff8a01
}

.driver-evaluate .mark-detail li[data-good='0']:after, .driver-evaluate .mark-detail li[data-good='0']:after {
    background-position: 0 1px
}

.driver-evaluate .mark-detail li[data-good='0'].active:after, .driver-evaluate .mark-detail li[data-good='0'].selected:after {
    background-position: 0 -17px
}

.driver-evaluate .mark-detail li[data-good='1']:after, .driver-evaluate .mark-detail li[data-good='1']:after {
    background-position: 0 -36px
}

.driver-evaluate .mark-detail li[data-good='1'].active:after, .driver-evaluate .mark-detail li[data-good='1'].selected:after {
    background-position: 0 -54px
}

.driver-evaluate .mark-detail:after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden
}

.driver-evaluate .other-reason {
    width: 80%;
    box-sizing: border-box;
    margin: 0;
    padding: 5px;
    font-family: 'Microsoft YaHei', arial, sans-serif, 'Droid Sans Fallback';
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 300px;
    font-size: 30px;
    outline: 0;
    line-height: 32px;
    box-shadow: none;
    resize: none
}


.driver-evaluate .other-reason:focus {
    border: 1px solid #1fb8df;
    box-shadow: 0 0 8px 0 #1fb8df;
}

.driver-star {
    width: 75px;
    height: 15px;
    margin: 1px 0;
    /*background: url(__PUBLIC__/img/star.png) 0 0 repeat-x;*/
    background-size: 15px auto;
    display: inline-block;
    vertical-align: sub
}

.driver-star li[data-star='0'] {
    background: url(/Public/img/star.png) 0 0 no-repeat;
    width: 60px;
    height: 60px;
    background-size: 68px;
    float: left;
}


.driver-star li[data-star='1']{
    background: url(__PUBLIC__/img/star.png) 0 -60px no-repeat;
     width: 60px;
    height: 60px;
    background-size: 68px;
    float: left;
}

/* 分享 */
.share_box.pc{width: 600px !important;}
.share_box{
  display:none;
  position:fixed;
  text-align:center;
  opacity: 0.92;
  z-index:101;
  bottom:-160px;
  background-color: rgb(51, 51, 51);
  padding:10px;
  border-radius: 4px;
  box-shadow: 0 0 5px #AAA;
  left:0;
  right:0;
}

.share_box a {display:inline-block;text-decoration: none;padding:5px;color: #FFFFFF;width: 100px;height: 100px;}
.share_box a:hover, .share_box a:focus, .share_box a:visited {text-decoration: none; color: #FFFFFF;}
.share_box a span {line-height:30px;font-size: 23px;}
.share-cancel-btn{
  font-size:23px;
  padding:7px 0;
  color: #fff;
}


    </style>

</head>

<body>
    <div class="layout fixed" id="page-home">
      <php>
        require_once "jssdk.php";
$jssdk = new JSSDK("wx9332faa7c9589a0e", "d2c3b99cccae5dd77c00487033919ad2");
$signPackage = $jssdk->GetSignPackage();  
    </php>
    
        <div class="top">
            <div class="logo"><img src="__PUBLIC__/img/logo.png" alt="" width="120px" height="120px"></div>
            <div class="orderdesc">
                <ul>
                  <li>小型搬家：需要搬运</li>
                  <li>订单金额：{$orderinfo.cost}</li>
                </ul>
            </div>
        </div>
        
        
        <div class="driver-evaluate">
            <div class="star driver-star star3" id="mark-star">
                <li data-star="1"></li>
                <li data-star="1"></li>
                <li data-star="1"></li>
                <li data-star="1"></li>
                <li data-star="1"></li>
            </div>
            <div id="mark-slide" style="display: none;padding:10px;">           
                <textarea id="comment-other-reason" class="other-reason" placeholder="其他意见和建议"></textarea>
               <button class="btn-confirm" id="sub_comment" onclick="savepingjia();">提交评论</button>
            </div>

        </div>
        <!-- <div class="share_box shar_box_center">
          <a href="javascript:;" id="onMenuShareTimeline" target="_blank">
            <img src="__PUBLIC__/images/share/wx_quan.png" height="100" width="100" />
            <br/><span>朋友圈</span>
          </a>
          <a href="javascript:;" id="onMenuShareWeibo" target="_blank">
            <img src="__PUBLIC__/images/share/qqmb.png" height="100" width="100"/>
            <br/><span>腾讯微博</span>
          </a>
          <a  href="javascript:;" id="onMenuShareAppMessage" target="_blank">
            <img src="__PUBLIC__/images/share/wx_friend.png" height="100" width="100" />
            <br/><span>微信好友</span>
          </a>
          <a href="javascript:;" id="onMenuShareQZone" target="_blank">
            <img src="__PUBLIC__/images/share/qzone.png" height="100" width="100" />
            <br/><span>QQ空间</span>
          </a>
          <a href="javascript:;" id="onMenuShareQQ" target="_blank">
            <img src="__PUBLIC__/images/share/qq_friend.png" height="100" width="100" />
            <br/><span>QQ好友</span>
          </a>
        <div class="share-cancel-btn btn btn-block">取消</div>
        </div> -->
        <div class="-mob-share-ui-button -mob-share-open" style="display: none">分享</div>
                            <div class="-mob-share-ui  -mob-share-ui-theme -mob-share-ui-theme-slide-bottom" style="display: none">
                                <ul class="-mob-share-list">
                                    <!-- <li class="-mob-share-weibo"><p>新浪微博</p></li> -->
                                    <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
                                    <li class="-mob-share-qzone"><p>QQ空间</p></li>
                                    <li class="-mob-share-qq"><p>QQ好友</p></li>
                                    <li class="-mob-share-weixin"><p>微信</p></li>
                                    
                                </ul>
                                <div class="-mob-share-close">取消</div>
                            </div>
                            <div class="-mob-share-ui-bg"></div>
                            <script id="-mob-share"
                            src="http://f1.webshare.mob.com/code/mob-share.js?appkey=193d8a19cddd5"></script>

       
        <div class="layer_notice" style="white-space:normal;">
          
        </div>
    </div>
    <script src="__PUBLIC__/js/jquery.min.js?t=20141028987051"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js?t=20141028987051"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
      mobShare.config( {
 
    debug: true, // 开启调试，将在浏览器的控制台输出调试信息
 
    appkey: '193d8a19cddd5', // appkey
 
    params: {
        url: 'http://nuower.com/index.php/Order/pl_list', // 分享链接
        title: '挪窝儿订单评价', // 分享标题
        description: '青岛最靠谱的搬家服务提供商', // 分享内容
        pic: 'http://nuower.com/Public/img/logo.png', // 分享图片，使用逗号,隔开
        reason:'青岛最靠谱的搬家服务提供商',//自定义评论内容，只应用与QQ,QZone与朋友网
    },
 
    /**
     * 分享时触发的回调函数
     * 分享是否成功，目前第三方平台并没有相关接口，因此无法知道分享结果
     * 所以此函数只会提供分享时的相关信息
     * 
     * @param {String} plat 平台名称
     * @param {Object} params 实际分享的参数 { url: 链接, title: 标题, description: 内容, pic: 图片连接 }
     */
    callback: function( plat, params ) {
    }
 
} );


      wx.config({
    debug: false, 
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
           /*
            * 所有要调用的 API 都要加到这个列表中
            * 这里以图像接口为例
            */
          'checkJsApi',  
        'onMenuShareTimeline',  
        'onMenuShareAppMessage',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'onMenuShareQQ'

    ]
  });

    wx.ready(function(){
      var dataForWeixin = {  
        title: '挪窝儿订单评价',  
        desc: '青岛最靠谱的搬家服务提供商',  
        imgUrl: 'http://nuower.com/Public/img/logo.png',  
        link: 'http://nuower.com/index.php/Order/pl_list'  
    };

      //分享朋友圈
        //document.querySelector('#onMenuShareTimeline').onclick = function(){
          //console.log('朋友圈');
          wx.onMenuShareTimeline({
            title: dataForWeixin.title, 
            link: dataForWeixin.link, 
            imgUrl: dataForWeixin.imgUrl, 
            success: function (res) { 
                console.log(res);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
          });
       //}

       // document.querySelector('#onMenuShareWeibo').onclick = function(){
         // console.log('腾讯微博');
          wx.onMenuShareTimeline({
            title: dataForWeixin.title, 
            link: dataForWeixin.link, 
            imgUrl: dataForWeixin.imgUrl, 
            success: function (res) { 
                console.log(res);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
          });
        //}
       // document.querySelector('#onMenuShareAppMessage').onclick = function(){
        //  console.log('微信好友');
          wx.onMenuShareTimeline({
            title: dataForWeixin.title, 
            link: dataForWeixin.link, 
            imgUrl: dataForWeixin.imgUrl, 
            success: function (res) { 
                console.log(res);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
          });
      //  }
        //document.querySelector('#onMenuShareQZone').onclick = function(){
         // console.log('QQ空间');
          wx.onMenuShareTimeline({
            title: dataForWeixin.title, 
            link: dataForWeixin.link, 
            imgUrl: dataForWeixin.imgUrl, 
            success: function (res) { 
                console.log(res);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
          });
       // }
       // document.querySelector('#onMenuShareQQ').onclick = function(){
         // console.log('qq好友');
          wx.onMenuShareTimeline({
            title: dataForWeixin.title, 
            link: dataForWeixin.link, 
            imgUrl: dataForWeixin.imgUrl, 
            success: function (res) { 
                console.log(res);
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
          });
       // }




      });



      $(function(){

    // 学员评价
    $('.driver-star li').click(function(){
        var index = $(this).index();
        $('#mark-slide').slideDown(600);
        var starbeizhu = $(this).attr('data-value');
        $('.driver-evaluate .info').text(starbeizhu);
        for(var i=0;i<=index;i++){
            $('.driver-star li').eq(i).attr('data-star','1');
        }
        for(var i=index+1;i<5;i++){
            $('.driver-star li').eq(i).attr('data-star','0');
        }
    });
     $('.driver-star li').click();
    $('.driver-evaluate .mark-detail li').click(function(){
        $(this).attr('class','selected');
    });

    
});

    function start_share(){
  // 如果已锁定触摸，不允许执行
  if(typeof(touchLock) != 'undefined' && touchLock){
    return false;
  }
  
  $(".share_box").show().animate({bottom: "0px"}, 600);
  
  // 弹出分享后，禁止滑动页面
  $("body").bind("touchmove", function(event) {
    if(event.preventDefault){
      event.preventDefault();// 阻止浏览器默认事件
    }
  });
}

      function savepingjia(){
    var stars = $('.driver-star li[data-star="1"]').size();
    var beizhus = $('#comment-other-reason').val();

        $.post(
         '__URL__/pinglun',
         {   
            id:'{$orderinfo.id}',
            type:'{$Think.get.type}',
            comment:beizhus,
            score:stars
         },
         function (data) {
             if (data.status==1) {
             alert('评论成功');
            $('.-mob-share-open').click(); 
             //start_share();
             //location.href=data.url;
          }else{
            alert(data.info);
          }


         });
    }

// "取消"按钮事件
$(".share-cancel-btn").click(function(){
  $(".share_box").animate({bottom: "-160px"}, 600, 'swing', function(){$(".share_box").hide();});
  
  // 取消分享后，解除滑动
  $("body").unbind("touchmove");
});

// 按钮点击状态样式
/*$(".footerbar a").bind('touchstart mousedown', function(){
  $(this).addClass('active');
  return true;
}).bind('touchend mouseup', function(){
  $(this).removeClass('active');
  return true;
});*/





    </script>




</body>
</html>
